//1.  获取.tab-list和.tab-item的DOM对象。

var tabList = document.querySelector(".tab-list");
var tabItem = document.querySelector(".tab-item");

//2.  再分别获取.tab-list下面li的DOM对象、.tab-item下面li的DOM对象。

var tabListLis = tabList.querySelectorAll("li");
var tabItemLis = tabItem.querySelectorAll("li");

//3.  通过遍历，给.tab-list下面li的DOM对象添加index自定义属性，
// 同样也要给.tab-item下面li的DOM对象添加index自定义属性。

for(var i=0;i<2;i++){
    tabListLis[i].setAttribute("index",i);
    tabItemLis[i].setAttribute("index",i);
    //4.  给.tab-list下面li的DOM对象绑定click事件，
    //被单击的tab按钮增加active样式，还要利用排他思想，将其他tab按钮的active样式去除。
    tabListLis[i].addEventListener('click',function () {
        for(var i=0;i<2;i++){
            tabListLis[i].className = ''
        }
        this.className = 'active'
        //5.  tab按钮的click事件发生时，
        // 获取当前激活tab按钮的index值，
        // 然后将tab内容li的display值进行修改，同样需要使用排他思想。
        var currentIndex = this.getAttribute("index");
        for(var i=0;i<2;i++){
            tabItemLis[i].style.display = 'none'
        }
        tabItemLis[currentIndex].style.display = 'block'
    })
}
